<template>
  <div style="width: 100%;overflow-y:scroll;height: calc(100vh - 72px)">
    <div class="modern-forms" style="margin-top: 120px">
      <div class="modern-container">
        <form style="text-align: left">
          <fieldset>
            <div class="mdn-group">
              <label class="field-group mdn-upload">
                <input v-model="imgpath" type="text" class="mdn-input" placeholder="no file selected" @click="selectImg" readonly>
                <label class="mdn-label">File Load</label>
                <span class="mdn-bar"></span>
                <span class="mdn-button btn-primary"> Choose Image </span>
              </label>
              <div class="field-group mdn-select">
                <select name="select" v-model="selectedFilter">
                  <option value="butterworth">butterworth低通滤波器</option>
                  <option value="gauss">高斯低通滤波器</option>
                  <option value="arithmetic_mean">算数均值滤波器</option>
                  <option value="geometric_mean">几何均值滤波器</option>
                  <option value="Invertedharmonic_mean">逆谐波均值滤波器</option>
                  <option value="med_filt">中值滤波器</option>
                  <option value="min_filt">最小值滤波器</option>
                  <option value="max_filt">最大值滤波器</option>
                  <option value="mid_filt">中点滤波器</option>
                  <option value="alpha_filt">修正阿尔法滤波器</option>
                  <option value="adaptive_mean">自适应局部降噪滤波器</option>
                  <option value="adaptive_mid">自适应中值滤波</option>
                </select>
                <label class="mdn-label">Select</label>
                <span class="mdn-bar"></span>
              </div>
            </div>
            <template v-if="imgpath">
              <div class="form-row">
                <div class="mdn-group">
                  <label class="field-group mdn-upload">
                    <label class="mdn-label">Origin Image</label>
                    <img id="originImg" style="margin-top: 10px"/>
                  </label>
                </div>
                <br/>
                <div class="mdn-group">
                  <label class="field-group mdn-upload">
                    <label class="mdn-label">Gray Domain</label>
                    <canvas id="grayImg" style="margin-top: 10px"/>
                  </label>
                </div>
                <div class="mdn-group">
                  <label class="field-group mdn-upload">
                    <label class="mdn-label">Filter Result</label>
                    <canvas id="resultImg" style="margin-top: 10px"/>
                  </label>
                </div>
              </div><!-- end form-row -->
            </template>
          </fieldset>
        </form>
      </div><!-- modern-container -->
    </div><!-- modern-forms -->
  </div>
</template>

<script>
import * as d3 from 'd3'
import { sliderBottom } from 'd3-simple-slider';
var mutex = true
function Fourier(imgdata, u, v, M, N) {
  let Gray, conv = 0, iconv = 0;
  for(let x = 0;x < M;x++){
    for(let y = 0;y < N;y++){
      let index = y*M+x, t = 2*Math.PI*(u*x/M + v*y/N);
      let cos = Math.cos(t), isin = -Math.sin(t);
      Gray = imgdata[index*4]
      if((x+y)%2===1) Gray = - Gray;// 移动到中间
      conv += Gray * cos
      iconv += Gray * isin
    }
  }
  return [conv,iconv];
}
export default {
  name: "c5q1",
  data(){
    return{
      imgpath:null,
      selectedFilter:'butterworth',
      processing: false
    }
  },
  watch:{
    'selectedFilter':function (){
      this.draw(document.getElementById('grayImg'))
    }
  },
  methods:{
    selectImg(){
      let input = document.createElement('input');
      input.type = 'file';
      return new Promise(function (resolve) {
        input.onchange = function(ev) {
          resolve(ev.target.files[0])
          return false;
        };
        input.click();
      }).then(file=>{
        this.imgpath = file.path
        const that = this
        return new Promise(function (resolve) {
          var reader = new FileReader();
          reader.onload = function(e){
            // target.result 该属性表示目标对象的DataURL
            let img = document.getElementById('originImg')
            img.src = e.target.result
            img.onload = ()=>resolve(img)
          }
          // 传入一个参数对象即可得到基于该参数对象的文本内容
          reader.readAsDataURL(file);
        })
      }).then(img=>{
        let canvas = document.getElementById('grayImg')
        canvas.width = img.width * 0.8;
        canvas.height = img.height * 0.8;
        let ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0, img.width * 0.8,img.height * 0.8);
        let imgData = ctx.getImageData(0,0,img.width * 0.8,img.height * 0.8)
        let len = img.width * img.height * 0.8 * 0.8;
        let R,G,B,Gray;
        for(let i = 0;i < len;i++){
          R = imgData.data[i*4]
          G = imgData.data[i*4+1]
          B = imgData.data[i*4+2]
          Gray = parseInt(R*0.299 + G*0.587 + B*0.114)// 彩色图转到频率域效果不好
          imgData.data[i*4] = imgData.data[i*4 + 1] = imgData.data[i*4 + 2] = Gray;
          imgData.data[i*4 + 3] = 255;
        }
        ctx.clearRect(0,0,img.width * 0.8,img.height * 0.8);
        ctx.putImageData(imgData, 0, 0);
        this.draw(canvas);
      })
    },
    draw(img){
      let ctx = img.getContext("2d");
      ctx.drawImage(img, 0, 0, img.width,img.height);
      let imgData = ctx.getImageData(0,0,img.width,img.height)
      let M = img.width, N = img.height, len = img.width * img.height;
      function doProcess(H){
        let store = [];
        for(let v = 0;v < N;v++){
          for(let u = 0;u < M;u++){
            let [conv,iconv] = Fourier(imgData.data,u,v,M,N)
            store.push(conv,iconv);
          }
        }
        let canvas = document.getElementById('resultImg')
        canvas.width = M;
        canvas.height = N;
        let ctx2 = canvas.getContext("2d");
        let imgData2 = ctx2.getImageData(0,0,M,N)
        for(let v = 0;v < N;v++){
          for(let u = 0;u < M;u++){
            let Gray = 0;
            for(let x = 0;x < M;x++){
              for(let y = 0;y < N;y++){
                let index = y*M+x, t = 2*Math.PI*(u*x/M + v*y/N);
                let conv = store[index*2];
                let iconv = store[index*2+1];
                let cos = Math.cos(t), isin = Math.sin(t);
                Gray += (conv*cos - iconv*isin) * H(x,y,M,N);
              }
            }
            let i = v * M + u;
            imgData2.data[i*4] = imgData2.data[i*4+1] = imgData2.data[i*4+2] = Math.round(Math.abs(Gray) / M / N);
            imgData2.data[i*4+3] = 255;
          }
        }
        ctx2.clearRect(0,0,M,N);
        ctx2.putImageData(imgData2, 0, 0);
      }
      let D0 = 10;
      if(this.selectedFilter === 'butterworth')
        doProcess((x,y,M,N)=>{
          let dx = (M/2-x), dy = (N/2-y);
          return 1/(1+Math.pow((dx*dx+dy*dy)/(D0*D0),2));
        })
      else if (this.selectedFilter === 'gauss')
        doProcess((x,y,M,N)=>{
          let dx = (M/2-x), dy = (N/2-y);
          return Math.exp(-(dx*dx+dy*dy)/(D0*D0));
        })
      else if (this.selectedFilter === 'arithmetic_mean'){
        let canvas = document.getElementById('resultImg')
        canvas.width = M+2;
        canvas.height = N+2;
        let gray;
        let ctx2 = canvas.getContext("2d");
        ctx2.drawImage(img, 1, 1, M,N);
        let imgData2 = ctx2.getImageData(0,0,M+2,N+2);
        let buffer = Array((M+2)*(N+2))
        for(let v = 1;v <= N;v++){
          for(let u = 1;u <= M;u++){
            let i = v * M + u;
            gray = parseInt((imgData2.data[((v-1) * M + (u-1))*4] + imgData2.data[((v-1) * M + u)*4] + imgData2.data[((v-1) * M + (u+1))*4] + imgData2.data[(v * M + (u-1))*4] + imgData2.data[(v * M + u)*4] + imgData2.data[(v * M + (u+1))*4] + imgData2.data[((v+1) * M + (u-1))*4] + imgData2.data[((v+1) * M + u)*4] + imgData2.data[((v+1) * M + (u+1))*4]) / 9);
            buffer[i] = gray;
          }
        }
        for (let i = 0;i < (M+2)*(N+2);i++){
          imgData2.data[i*4] = imgData2.data[i*4+1] = imgData2.data[i*4+2] = buffer[i]
          imgData2.data[i*4+3] = buffer[i]
        }
        canvas.width = M;
        canvas.height = N;
        ctx2.clearRect(0,0,M,N);
        ctx2.putImageData(imgData2, -1, -1);
      }
      else if (this.selectedFilter === 'geometric_mean'){
        let canvas = document.getElementById('resultImg')
        canvas.width = M+2;
        canvas.height = N+2;
        let gray;
        let ctx2 = canvas.getContext("2d");
        ctx2.drawImage(img, 1, 1, M,N);
        let imgData2 = ctx2.getImageData(0,0,M+2,N+2);
        let buffer = Array((M+2)*(N+2))
        for(let v = 1;v <= N;v++){
          for(let u = 1;u <= M;u++){
            let i = v * M + u;
            gray = parseInt(Math.pow((
                imgData2.data[((v-1) * M + (u-1))*4] * imgData2.data[((v-1) * M + u)*4] * imgData2.data[((v-1) * M + (u+1))*4] *
                imgData2.data[(v * M + (u-1))*4] * imgData2.data[(v * M + u)*4] * imgData2.data[(v * M + (u+1))*4] *
                imgData2.data[((v+1) * M + (u-1))*4] * imgData2.data[((v+1) * M + u)*4] * imgData2.data[((v+1) * M + (u+1))*4]),1/9));
            buffer[i] = gray;
          }
        }
        for (let i = 0;i < (M+2)*(N+2);i++){
          imgData2.data[i*4] = imgData2.data[i*4+1] = imgData2.data[i*4+2] = buffer[i]
          imgData2.data[i*4+3] = buffer[i]
        }
        canvas.width = M;
        canvas.height = N;
        ctx2.clearRect(0,0,M,N);
        ctx2.putImageData(imgData2, -1, -1);
      }
      else if (this.selectedFilter === 'Invertedharmonic_mean'){
        let Q = 10;
        let canvas = document.getElementById('resultImg')
        canvas.width = M+2;
        canvas.height = N+2;
        let mole,deno;
        let ctx2 = canvas.getContext("2d");
        ctx2.drawImage(img, 1, 1, M,N);
        let imgData2 = ctx2.getImageData(0,0,M+2,N+2);
        let buffer = Array((M+2)*(N+2))
        for(let v = 1;v <= N;v++){
          for(let u = 1;u <= M;u++){
            let i = v * M + u;
            mole = (Math.pow(imgData2.data[((v-1) * M + (u-1))*4],Q+1) + Math.pow(imgData2.data[((v-1) * M + u)*4],Q+1) + Math.pow(imgData2.data[((v-1) * M + (u+1))*4], Q+1) + Math.pow(imgData2.data[(v * M + (u-1))*4],Q+1) + Math.pow(imgData2.data[(v * M + u)*4],Q+1) + Math.pow(imgData2.data[(v * M + (u+1))*4],Q+1) + Math.pow(imgData2.data[((v+1) * M + (u-1))*4],Q+1) + Math.pow(imgData2.data[((v+1) * M + u)*4],Q+1) + Math.pow(imgData2.data[((v+1) * M + (u+1))*4],Q+1));
            deno = (Math.pow(imgData2.data[((v-1) * M + (u-1))*4],Q) + Math.pow(imgData2.data[((v-1) * M + u)*4],Q) + Math.pow(imgData2.data[((v-1) * M + (u+1))*4], Q) + Math.pow(imgData2.data[(v * M + (u-1))*4],Q) + Math.pow(imgData2.data[(v * M + u)*4],Q) + Math.pow(imgData2.data[(v * M + (u+1))*4],Q) + Math.pow(imgData2.data[((v+1) * M + (u-1))*4],Q) + Math.pow(imgData2.data[((v+1) * M + u)*4],Q) + Math.pow(imgData2.data[((v+1) * M + (u+1))*4],Q));
            buffer[i] = parseInt(mole/deno);
          }
        }
        for (let i = 0;i < (M+2)*(N+2);i++){
          imgData2.data[i*4] = imgData2.data[i*4+1] = imgData2.data[i*4+2] = buffer[i]
          imgData2.data[i*4+3] = buffer[i]
        }
        canvas.width = M;
        canvas.height = N;
        ctx2.clearRect(0,0,M,N);
        ctx2.putImageData(imgData2, -1, -1);
      }
      else if (this.selectedFilter === 'med_filt'){
        let canvas = document.getElementById('resultImg')
        canvas.width = M+2;
        canvas.height = N+2;
        let gray;
        let ctx2 = canvas.getContext("2d");
        ctx2.drawImage(img, 1, 1, M,N);
        let imgData2 = ctx2.getImageData(0,0,M+2,N+2);
        let buffer = Array((M+2)*(N+2))
        for(let v = 1;v <= N;v++){
          for(let u = 1;u <= M;u++){
            let i = v * M + u;
            gray = [imgData2.data[((v-1) * M + (u-1))*4] , imgData2.data[((v-1) * M + u)*4] , imgData2.data[((v-1) * M + (u+1))*4] , imgData2.data[(v * M + (u-1))*4] , imgData2.data[(v * M + u)*4] , imgData2.data[(v * M + (u+1))*4] , imgData2.data[((v+1) * M + (u-1))*4] , imgData2.data[((v+1) * M + u)*4] , imgData2.data[((v+1) * M + (u+1))*4]]
            gray = gray.sort()
            buffer[i] = gray[4];
          }
        }
        for (let i = 0;i < (M+2)*(N+2);i++){
          imgData2.data[i*4] = imgData2.data[i*4+1] = imgData2.data[i*4+2] = buffer[i]
          imgData2.data[i*4+3] = buffer[i]
        }
        canvas.width = M;
        canvas.height = N;
        ctx2.clearRect(0,0,M,N);
        ctx2.putImageData(imgData2, -1, -1);
      }
      else if (this.selectedFilter === 'min_filt'){
        let canvas = document.getElementById('resultImg')
        canvas.width = M+2;
        canvas.height = N+2;
        let gray;
        let ctx2 = canvas.getContext("2d");
        ctx2.drawImage(img, 1, 1, M,N);
        let imgData2 = ctx2.getImageData(0,0,M+2,N+2);
        let buffer = Array((M+2)*(N+2))
        for(let v = 1;v <= N;v++){
          for(let u = 1;u <= M;u++){
            let i = v * M + u;
            gray = [imgData2.data[((v-1) * M + (u-1))*4] , imgData2.data[((v-1) * M + u)*4] , imgData2.data[((v-1) * M + (u+1))*4] , imgData2.data[(v * M + (u-1))*4] , imgData2.data[(v * M + u)*4] , imgData2.data[(v * M + (u+1))*4] , imgData2.data[((v+1) * M + (u-1))*4] , imgData2.data[((v+1) * M + u)*4] , imgData2.data[((v+1) * M + (u+1))*4]]
            gray = gray.sort()
            buffer[i] = gray[0];
          }
        }
        for (let i = 0;i < (M+2)*(N+2);i++){
          imgData2.data[i*4] = imgData2.data[i*4+1] = imgData2.data[i*4+2] = buffer[i]
          imgData2.data[i*4+3] = buffer[i]
        }
        canvas.width = M;
        canvas.height = N;
        ctx2.clearRect(0,0,M,N);
        ctx2.putImageData(imgData2, -1, -1);
      }
      else if (this.selectedFilter === 'max_filt'){
        let canvas = document.getElementById('resultImg')
        canvas.width = M+2;
        canvas.height = N+2;
        let gray;
        let ctx2 = canvas.getContext("2d");
        ctx2.drawImage(img, 1, 1, M,N);
        let imgData2 = ctx2.getImageData(0,0,M+2,N+2);
        let buffer = Array((M+2)*(N+2))
        for(let v = 1;v <= N;v++){
          for(let u = 1;u <= M;u++){
            let i = v * M + u;
            gray = [imgData2.data[((v-1) * M + (u-1))*4] , imgData2.data[((v-1) * M + u)*4] , imgData2.data[((v-1) * M + (u+1))*4] , imgData2.data[(v * M + (u-1))*4] , imgData2.data[(v * M + u)*4] , imgData2.data[(v * M + (u+1))*4] , imgData2.data[((v+1) * M + (u-1))*4] , imgData2.data[((v+1) * M + u)*4] , imgData2.data[((v+1) * M + (u+1))*4]]
            gray = gray.sort()
            buffer[i] = gray[8];
          }
        }
        for (let i = 0;i < (M+2)*(N+2);i++){
          imgData2.data[i*4] = imgData2.data[i*4+1] = imgData2.data[i*4+2] = buffer[i]
          imgData2.data[i*4+3] = buffer[i]
        }
        canvas.width = M;
        canvas.height = N;
        ctx2.clearRect(0,0,M,N);
        console.log('mark')
        ctx2.putImageData(imgData2, -1, -1);
      }
      else if (this.selectedFilter === 'mid_filt'){
        let canvas = document.getElementById('resultImg')
        canvas.width = M+2;
        canvas.height = N+2;
        let gray;
        let ctx2 = canvas.getContext("2d");
        ctx2.drawImage(img, 1, 1, M,N);
        let imgData2 = ctx2.getImageData(0,0,M+2,N+2);
        let buffer = Array((M+2)*(N+2))
        for(let v = 1;v <= N;v++){
          for(let u = 1;u <= M;u++){
            let i = v * M + u;
            gray = [imgData2.data[((v-1) * M + (u-1))*4] , imgData2.data[((v-1) * M + u)*4] , imgData2.data[((v-1) * M + (u+1))*4] , imgData2.data[(v * M + (u-1))*4] , imgData2.data[(v * M + u)*4] , imgData2.data[(v * M + (u+1))*4] , imgData2.data[((v+1) * M + (u-1))*4] , imgData2.data[((v+1) * M + u)*4] , imgData2.data[((v+1) * M + (u+1))*4]]
            gray = gray.sort()
            buffer[i] = parseInt((gray[0] + gray[8]) / 2);
          }
        }
        for (let i = 0;i < (M+2)*(N+2);i++){
          imgData2.data[i*4] = imgData2.data[i*4+1] = imgData2.data[i*4+2] = buffer[i]
          imgData2.data[i*4+3] = buffer[i]
        }
        canvas.width = M;
        canvas.height = N;
        ctx2.clearRect(0,0,M,N);
        console.log('mark')
        ctx2.putImageData(imgData2, -1, -1);
      }
      else if (this.selectedFilter === 'alpha_filt'){
        let canvas = document.getElementById('resultImg')
        canvas.width = M+2;
        canvas.height = N+2;
        let gray;
        let ctx2 = canvas.getContext("2d");
        ctx2.drawImage(img, 1, 1, M,N);
        let imgData2 = ctx2.getImageData(0,0,M+2,N+2);
        let buffer = Array((M+2)*(N+2))
        for(let v = 1;v <= N;v++){
          for(let u = 1;u <= M;u++){
            let i = v * M + u;
            gray = [imgData2.data[((v-1) * M + (u-1))*4] , imgData2.data[((v-1) * M + u)*4] , imgData2.data[((v-1) * M + (u+1))*4] , imgData2.data[(v * M + (u-1))*4] , imgData2.data[(v * M + u)*4] , imgData2.data[(v * M + (u+1))*4] , imgData2.data[((v+1) * M + (u-1))*4] , imgData2.data[((v+1) * M + u)*4] , imgData2.data[((v+1) * M + (u+1))*4]]
            gray = gray.sort()
            buffer[i] = parseInt((gray[2] + gray[3] + gray[4] + gray[5] + gray[6]) / 5);
          }
        }
        for (let i = 0;i < (M+2)*(N+2);i++){
          imgData2.data[i*4] = imgData2.data[i*4+1] = imgData2.data[i*4+2] = buffer[i]
          imgData2.data[i*4+3] = buffer[i]
        }
        canvas.width = M;
        canvas.height = N;
        ctx2.clearRect(0,0,M,N);
        console.log('mark')
        ctx2.putImageData(imgData2, -1, -1);
      }
      else if (this.selectedFilter === 'adaptive_mean'){
        let canvas = document.getElementById('resultImg')
        canvas.width = M+2;
        canvas.height = N+2;
        let gray;
        let ctx2 = canvas.getContext("2d");
        ctx2.drawImage(img, 1, 1, M,N);
        let imgData2 = ctx2.getImageData(0,0,M+2,N+2);
        let buffer = Array((M+2)*(N+2))
        for(let v = 1;v <= N;v++){
          for(let u = 1;u <= M;u++){
            let i = v * M + u;
            gray = [imgData2.data[((v-1) * M + (u-1))*4] , imgData2.data[((v-1) * M + u)*4] , imgData2.data[((v-1) * M + (u+1))*4] , imgData2.data[(v * M + (u-1))*4] , imgData2.data[(v * M + u)*4] , imgData2.data[(v * M + (u+1))*4] , imgData2.data[((v+1) * M + (u-1))*4] , imgData2.data[((v+1) * M + u)*4] , imgData2.data[((v+1) * M + (u+1))*4]]
            gray = gray.sort()
            buffer[i] = parseInt((gray[2] + gray[3] + gray[4] + gray[5] + gray[6]) / 5);
          }
        }
        for (let i = 0;i < (M+2)*(N+2);i++){
          imgData2.data[i*4] = imgData2.data[i*4+1] = imgData2.data[i*4+2] = buffer[i]
          imgData2.data[i*4+3] = buffer[i]
        }
        canvas.width = M;
        canvas.height = N;
        ctx2.clearRect(0,0,M,N);
        console.log('mark')
        ctx2.putImageData(imgData2, -1, -1);
      }
      else if (this.selectedFilter === 'adaptive_mid'){
        let canvas = document.getElementById('resultImg')
        canvas.width = M+2;
        canvas.height = N+2;
        let gray;
        let ctx2 = canvas.getContext("2d");
        ctx2.drawImage(img, 1, 1, M,N);
        let imgData2 = ctx2.getImageData(0,0,M+2,N+2);
        let buffer = Array((M+2)*(N+2))
        for(let v = 1;v <= N;v++){
          for(let u = 1;u <= M;u++){
            let i = v * M + u;
            gray = [imgData2.data[((v-1) * M + (u-1))*4] , imgData2.data[((v-1) * M + u)*4] , imgData2.data[((v-1) * M + (u+1))*4] , imgData2.data[(v * M + (u-1))*4] , imgData2.data[(v * M + u)*4] , imgData2.data[(v * M + (u+1))*4] , imgData2.data[((v+1) * M + (u-1))*4] , imgData2.data[((v+1) * M + u)*4] , imgData2.data[((v+1) * M + (u+1))*4]]
            gray = gray.sort()
            buffer[i] = parseInt((gray[2] + gray[3] + gray[4] + gray[5] + gray[6]) / 5);
          }
        }
        for (let i = 0;i < (M+2)*(N+2);i++){
          imgData2.data[i*4] = imgData2.data[i*4+1] = imgData2.data[i*4+2] = buffer[i]
          imgData2.data[i*4+3] = buffer[i]
        }
        canvas.width = M;
        canvas.height = N;
        ctx2.clearRect(0,0,M,N);
        console.log('mark')
        ctx2.putImageData(imgData2, -1, -1);
      }
    }
  },
  mounted() {
  }
}
</script>

<style scoped>
.axis path,
.axis line{
  fill: none;
  stroke: black;
  shape-rendering: crispEdges;
}

.axis text {
  font-family: sans-serif;
  font-size: 11px;
}

.MyRect {
  fill: steelblue;
}

.MyText {
  fill: white;
  text-anchor: middle;
}

</style>